HTML部分:

        <h1 class="game logo">猜拳遊戲</h1>
        <p>點擊圖片選擇你想出的拳</p>
        <div class="game">
        <img src="/img/rock.png" alt="石頭" onclick="playGame('rock')">
        <img src="/img/paper.png" alt="布" onclick="playGame('paper')">
        <img src="/img/scissor.png" alt="剪刀" onclick="playGame('scissors')">
        </div>
        <p id="result"></p>

1. <h1 class="game logo">猜拳遊戲</h1>：這是一個標題，顯示在網頁上，它的類別(class)是 "game logo"，用於可能的CSS樣式設置。

2. <p>點擊圖片選擇你想出的拳</p>：這是一個段落，顯示在網頁上，用來提示玩家在圖片上點擊以選擇他們要出的拳。

3. <div class="game">：這是一個<div>元素，它用來包裝下面的圖片，並將它們放在一個具有 "game" 類別的區域內，這樣可以進行CSS樣式設置或JavaScript操作。

4. <img src="/img/rock.png" alt="石頭" onclick="playGame('rock')">：這是一個圖像元素，顯示了一張石頭的圖片。當用戶單擊這個圖片時，它將調用名為 "playGame" 的JavaScript函數，並傳遞 'rock' 作為參數，表示玩家選擇了石頭。

5. <img src="/img/paper.png" alt="布" onclick="playGame('paper')">：這是一個圖像元素，顯示了一張布的圖片。當用戶單擊這個圖片時，它將調用名為 "playGame" 的JavaScript函數，並傳遞 'paper' 作為參數，表示玩家選擇了布。

6. <img src="/img/scissor.png" alt="剪刀" onclick="playGame('scissors')">：這是一個圖像元素，顯示了一張剪刀的圖片。當用戶單擊這個圖片時，它將調用名為 "playGame" 的JavaScript函數，並傳遞 'scissors' 作為參數，表示玩家選擇了剪刀。

7. <p id="result"></p>：這是一個段落，用來顯示遊戲的結果。它具有 "result" 作為ID，可以通過JavaScript來更新以顯示遊戲的結果。

CSS部分：

h1.game.logo {
    color: #333;
    display: flex;
    justify-content: center;
    align-items:center; 
}

p {
    font-size: 20px;
    color: #555;
    display: flex;
    justify-content: center;
    align-items:center; 
}

div.game {
    display: flex;
    justify-content: center;
    align-items: center;
    height:30vh; 
}

div.game img {
    width: 100px;
    cursor: pointer;
    border: 2px solid #333;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
    margin: 10px;
}

div.game img:hover {
    transform: scale(1.1);
}


#result {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #333;
}

1. h1.game.logo：這是一個CSS選擇器，它選擇了具有 "game logo" 類別的 <h1> 元素。這意味著它將樣式應用於 <h1> 標題，並且這個標題必須同時擁有 "game" 和 "logo" 類別。

   • color: #333;：設置文字顏色為深灰色 (#333)。
   • display: flex;：使用彈性布局。
   • justify-content: center;：水平居中對齊內容。
   • align-items: center;：垂直居中對齊內容。

2. p：這是一個CSS選擇器，它選擇了所有 <p> 元素，這意味著它將樣式應用於所有段落。

   • font-size: 20px;：設置字體大小為20像素。
   • color: #555;：設置文字顏色為深灰色 (#555)。
   • display: flex;：使用彈性布局。
   • justify-content: center;：水平居中對齊內容。
   • align-items: center;：垂直居中對齊內容。

3. div.game：這是一個CSS選擇器，它選擇了具有 "game" 類別的 <div> 元素，這意味著它將樣式應用於遊戲區域的 <div>。

   • display: flex;：使用彈性布局。
   • justify-content: center;：水平居中對齊內容。
   • align-items: center;：垂直居中對齊內容。
   • height: 30vh;：設置高度為視窗高度的30%。這將用於使遊戲區域在頁面上保持一定的高度。

4. div.game img：這是一個CSS選擇器，它選擇了遊戲區域中的所有圖片元素。

   • width: 100px;：設置圖片寬度為100像素。
   • cursor: pointer;：當鼠標懸停在圖片上時，顯示為手型游標。
   • border: 2px solid #333;：設置2像素寬的深灰色實線邊框。
   • border-radius: 5px;：設置5像素的圓角邊框。
   • transition: transform 0.2s ease-in-out;：添加了一個0.2秒的平滑動畫，當圖片被放大時，它會以緩慢的方式變化。
   • margin: 10px;：設置圖片的外邊距，使其與周圍的元素有一些間距。

5. div.game img:hover：這是一個懸停狀態的CSS選擇器，當用戶將鼠標懸停在圖片上時，這些樣式將應用於圖片。

   • transform: scale(1.1);：將圖片放大1.1倍。這會在用戶懸停在圖片上時創建一個簡單的縮放效果，使圖片略微變大。

6. #result：這是一個CSS選擇器，它選擇了具有 "result" ID 的元素，這意味著它將樣式應用於具有該ID的元素。

   • font-size: 24px;：設置字體大小為24像素。
   • font-weight: bold;：設置文字為粗體。
   • margin-top: 20px;：設置上邊距為20像素，將結果與上面的內容分開。
   • color: #333;：設置文字顏色為深灰色 (#333)。

目前製作結果: